<template>
	<view class="wrap">

			<view class="content">
				<view class="leftContent">
					<view class="amount">
						<view class="couponAmount">
							<text class="amount_unit">¥</text>
							<text class="realAmount">{{discountAmount}}</text>
						</view>
								<text class="useInfo">{{rangInfo}}</text>
					</view>
					<view class="contentInfo">
						<text class="activity-name">{{activityType}}</text>
						<text class="useTypeName">{{useTypeName}}</text>
						<text class="time">{{durationDate}}</text>
						<view class="useType" @click="changeDesc">
							<text class="conponType">{{storeRang}}</text>
							<image class="arrow" src="../../static/coupon/coupon_up.png" mode=""></image>
						</view>

					</view>

				</view>
				<view class="rightContent">
					<text class="conponType1" :style="{'background-color':(isReceive == '立即领取' ? '#FFF9E0' : '#F2F2F2')} ">{{couponType}}</text>
					<view class="button" v-if="isReceive == '立即领取'" @click="getCoupon">
						{{isReceive}}
					</view>
					<view class="statusWrap" v-else>{{isReceive}}</view>
					<!-- <view v-else-if="businessType == 1">
						<view class="statusWrap" v-if="memberCouponStatus == 1">已使用</view>
						<view class="statusWrap" v-else-if="memberCouponStatus == 2">已过期</view>
						<view class="statusWrap" v-else-if="memberCouponStatus == 3">已增送</view>
					</view> -->

					<!-- <button class="examples" hover-class="none"  size="mini" :plain="true" v-if="businessType == 1 && memberCouponStatus == 0 && isTurn == 1" open-type="share" :data-memberId="memberId">去转赠</button> -->
				</view>
			</view>
			<image class="cover" :src="isReceive == '立即领取' ? receivedBgUrl : unReceivedBgUrl" mode="scaleToFill"></image>

			<view class="descWrap" v-if="isShowDesc">
				<text class="descTitle">使用说明: </text>
				<view class="descContent">
					<view class="desc1">
						1. {{applicableUnitType}}
						<text class="desc2" @click="goStore" v-if="businessId">查看适用门店></text>
					</view>
					<view class="desc1 desc-item">
						2. {{useNotice}}
					</view>
					<!-- <view class="desc1 desc-item">
						3.最终解释权归blablabla店所有
					</view> -->
					<!-- <view class="desc2 desc-item" v-if="useArea!=1" @click="goCar">
						查看指定车型>
					</view> -->
				</view>


			</view>


	</view>
</template>

<script>
	import {
		receiveCoupons,
	} from '@/common/apis/home-api.js';

	export default {
		data() {
			return {
				// receivedBgUrl: '../../static/coupon/coupon_undrawed.png',
				receivedBgUrl: this.baseImageUrl+'uni_rental/优惠券背景_领取前@2x.png',
				unReceivedBgUrl: this.baseImageUrl+'uni_rental/coupon_drawed.png',
				isShowDesc: false
			}
		},
		props: {
			couponId: {
				type: String,
				default:''
			},
			businessId: {
				type: String,
				default:''
			},
			discountAmount: {
				type: String,
				default:''
			},
			rangInfo: {
				type: String,
				default:''
			},
			activityType: {
				type: String,
				default: ''
			},
			durationDate: {
				type: String,
				default: ''
			},
			storeRang: {
				type: String,
				default: ''
			},
			couponType: {
				type: String,
				default: ''
			},
			useNotice: {
				type: String,
				default: ''
			},
			//业务类型 0 更多优惠券使用isReceive做业务判断 1我的优惠券使用memberCouponStatus做业务判断
			businessType : {
				type: String | Number,
				default: 1
			},
		    isReceive: {
				type: String | Number,
				default: ''
			},
			memberCouponStatus: {
				type: String | Number,
				default: -1
			},
			isTurn: {
				type: Number,
				default: 0
			},
			useArea:{
				type: String | Number,
				default: 0
			},
			memberId : {
				type: String,
				default: ''
			},
			useTypeName: {
				type: String,
				default: ''
			},
			applicableUnitType : {
				type:String,
				default: ''
			}
		},

		methods: {
			getCoupon() {

				// if(this.businessType == 0){
				// 	this.$emit("getCoupon", {businessId: this.businessId})
				// }else{
				// 	uni.navigateTo({
				// 		url: '../../pages/coupon/coupon-detail?memberId=' + this.memberId
				// 	})
				// }

				let list = [this.couponId];


				receiveCoupons({
					couponIds: list
				}).then(res => {

					uni.showToast({
						title: '恭喜您，领取成功',
						icon: 'none'
					})

					//改变props的方法，配合sync使用
					this.$emit('update:isReceive', '已领取');

					this.$emit("getCoupon", true)

				})

			},
			// shareCoupon() {
			// 	this.$emit('shareCoupon', {memberId: this.memberId});
			// },

			changeDesc() {
				this.isShowDesc = !this.isShowDesc;
			},
			// goStore() {
			// 	uni.navigateTo({
			// 		url:'../../pages/coupon/coupon-store?businessId=' + this.businessId
			// 	})
			// },
			// goCar() {
			// 	uni.navigateTo({
			// 		url: '../../pages/coupon/coupon-car?businessId=' + this.businessId
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
.wrap {
	// position: relative;
	padding: 0upx 20upx;
}
.cover {
	width: 706upx;
	height: 190upx;
	line-height: 190upx;

}

.content {
	position: relative;
	display: flex;
	margin-top: 26upx;
	.leftContent {
		display: flex;
		position: absolute;
		top: 0;
		left: 22upx;
		justify-content: center;
		.amount {
			display: flex;
			width: 206upx;
			height: 190upx;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.couponAmount {
				display: flex;
				align-items: flex-start;
			}
		}
		.contentInfo {
			display: flex;
			flex-direction: column;
			width: 244upx;
	        margin-right: 10upx;
			.useType {
				display: flex;
				margin-top: 12upx;
				justify-content: space-between;
				align-items: center;
			}
		}

	}
	.rightContent {
		display: flex;
		flex-direction: column;
		align-items: center;

		width: 240upx;
		position: absolute;
		top: 0;
		right: 0;
	}

}

.amount_unit {
	position: relative;
	top: 10upx;
	font-size: 21upx;
	color: #333;
	margin-right: 3upx;
	font-weight: bold;
	line-height: 1;
}

.realAmount {
	font-size: 67upx;
	font-weight: bold;
	font-family: Eras Bold ITC, Eras Bold ITC-Regular;
	color: #333;
	text-align: center;
	line-height: 1;
	// letter-spacing: -11upx;
}

.useInfo {
	margin-top: 15upx;
	font-size: 21upx;
	font-family: PingFang SC, PingFang SC-Bold;
	font-weight: bold;
	color: #333;
}

.activity-name {
	margin-top: 40upx;
	color: #333;
	font-size: 21upx;
	font-weight: bold;
	font-family: PingFang SC, PingFang SC-Bold;
}


.useTypeName {
	margin-top: 10upx;
	color: #666;
	font-size: 16upx;
}

.time {
	margin-top: 10upx;
	color: #666;
	font-size: 16upx;
}

.conponType {
	font-size: 20upx;
	color: #666;
}

.arrow {
	width: 18upx;
	height: 18upx;
	margin-right: 48upx;
}

.conponType1 {
	color: #666;
	font-size: 22upx;
	padding: 4upx 20upx 8upx;
	background-color: #FFF9E0;
	border-radius: 0 0 28upx 28upx;
}

.button {
	width: 180upx;
	height: 56upx;
	line-height: 56upx;
	background: linear-gradient(0deg,#009B01 0%, #FFBC83 100%);
	border-radius: 28upx;
	margin-top: 30upx;
	text-align: center;
	font-size: 24upx;
	color: #FFFDC2;
}

.descWrap {
	display: flex;
	background-color: #FCFCFC;
	padding: 40upx 20upx 30upx;
	position: relative;
	top: -23upx;
	z-index: -1;
}

.descTitle {
	display: inline-block;
	font-size: 20upx;
	color: #666;
	width: 150upx;
	text-align: right;
}

.descContent {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	margin-left: 10upx;
}


.desc1 {
	font-size: 20upx;
	color: #666;
}

.desc2 {
	font-size: 20upx;
	color: #009B01;
}

.desc-item {
	margin-top: 18upx;
}

.examples {
	font-size: 24upx;
	font-family: PingFang SC, PingFang SC-Bold;
	font-weight: bold;
	text-align: left;
	color: #009B01;
	margin-top: upx;
	border: none;
}

 button::after{
    border: none;
}

.statusWrap {
	margin-top: 12upx;
	width: 112upx;
	height: 112upx;
	border: 1upx dashed #b0b0b0;
	border-radius: 56upx;
	font-size: 18upx;
	color: #A4A4A4;
	letter-spacing: 2upx;
	line-height: 112upx;
	align-self: center;
	text-align: center;
	font-weight: bold;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
}


</style>

